<template>
  <div class="settings-container">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <h1>系统设置</h1>
        <p>管理台球厅系统配置和参数</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="saveAllSettings" :loading="saving">
          <el-icon><Check /></el-icon>
          保存所有设置
        </el-button>
      </div>
    </div>

    <!-- 设置选项卡 -->
    <el-tabs v-model="activeTab" class="settings-tabs">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>台球厅基本信息</span>
            </div>
          </template>
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="台球厅名称">
              <el-input v-model="basicSettings.name" placeholder="请输入台球厅名称" />
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="basicSettings.phone" placeholder="请输入联系电话" />
            </el-form-item>
            <el-form-item label="营业地址">
              <el-input v-model="basicSettings.address" placeholder="请输入营业地址" />
            </el-form-item>
            <el-form-item label="营业时间">
              <el-time-picker
                v-model="basicSettings.openTime"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="开始时间"
                style="width: 120px; margin-right: 10px;"
              />
              <span style="margin: 0 10px;">至</span>
              <el-time-picker
                v-model="basicSettings.closeTime"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="结束时间"
                style="width: 120px;"
              />
            </el-form-item>
            <el-form-item label="台球厅介绍">
              <el-input
                v-model="basicSettings.description"
                type="textarea"
                :rows="4"
                placeholder="请输入台球厅介绍"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 价格设置 -->
      <el-tab-pane label="价格设置" name="pricing">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>台球桌价格配置</span>
            </div>
          </template>
          <el-form :model="pricingSettings" label-width="120px">
            <el-form-item label="标准台价格">
              <el-input-number
                v-model="pricingSettings.standardPrice"
                :min="1"
                :max="1000"
                :precision="0"
                controls-position="right"
              />
              <span style="margin-left: 10px;">元/小时</span>
            </el-form-item>
            <el-form-item label="VIP台价格">
              <el-input-number
                v-model="pricingSettings.vipPrice"
                :min="1"
                :max="1000"
                :precision="0"
                controls-position="right"
              />
              <span style="margin-left: 10px;">元/小时</span>
            </el-form-item>
            <el-form-item label="比赛台价格">
              <el-input-number
                v-model="pricingSettings.competitionPrice"
                :min="1"
                :max="1000"
                :precision="0"
                controls-position="right"
              />
              <span style="margin-left: 10px;">元/小时</span>
            </el-form-item>
            <el-form-item label="会员折扣">
              <el-input-number
                v-model="pricingSettings.memberDiscount"
                :min="0.1"
                :max="1"
                :precision="2"
                :step="0.1"
                controls-position="right"
              />
              <span style="margin-left: 10px;">折</span>
            </el-form-item>
            <el-form-item label="最低消费时间">
              <el-input-number
                v-model="pricingSettings.minHours"
                :min="0.5"
                :max="24"
                :precision="1"
                :step="0.5"
                controls-position="right"
              />
              <span style="margin-left: 10px;">小时</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 预订设置 -->
      <el-tab-pane label="预订设置" name="booking">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>预订规则配置</span>
            </div>
          </template>
          <el-form :model="bookingSettings" label-width="120px">
            <el-form-item label="提前预订天数">
              <el-input-number
                v-model="bookingSettings.advanceDays"
                :min="1"
                :max="30"
                controls-position="right"
              />
              <span style="margin-left: 10px;">天</span>
            </el-form-item>
            <el-form-item label="取消预订时限">
              <el-input-number
                v-model="bookingSettings.cancelHours"
                :min="1"
                :max="72"
                controls-position="right"
              />
              <span style="margin-left: 10px;">小时前</span>
            </el-form-item>
            <el-form-item label="预订押金">
              <el-input-number
                v-model="bookingSettings.deposit"
                :min="0"
                :max="1000"
                :precision="0"
                controls-position="right"
              />
              <span style="margin-left: 10px;">元</span>
            </el-form-item>
            <el-form-item label="允许重复预订">
              <el-switch v-model="bookingSettings.allowMultiple" />
            </el-form-item>
            <el-form-item label="需要实名认证">
              <el-switch v-model="bookingSettings.requireRealName" />
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 通知设置 -->
      <el-tab-pane label="通知设置" name="notification">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>消息通知配置</span>
            </div>
          </template>
          <el-form :model="notificationSettings" label-width="120px">
            <el-form-item label="短信通知">
              <el-switch v-model="notificationSettings.smsEnabled" />
              <div class="setting-desc">开启后将发送预订确认和提醒短信</div>
            </el-form-item>
            <el-form-item label="邮件通知">
              <el-switch v-model="notificationSettings.emailEnabled" />
              <div class="setting-desc">开启后将发送预订确认和账单邮件</div>
            </el-form-item>
            <el-form-item label="微信通知">
              <el-switch v-model="notificationSettings.wechatEnabled" />
              <div class="setting-desc">开启后将通过微信公众号发送通知</div>
            </el-form-item>
            <el-form-item label="提醒时间">
              <el-input-number
                v-model="notificationSettings.reminderMinutes"
                :min="5"
                :max="120"
                :step="5"
                controls-position="right"
              />
              <span style="margin-left: 10px;">分钟前提醒</span>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 系统设置 -->
      <el-tab-pane label="系统设置" name="system">
        <el-card class="setting-card">
          <template #header>
            <div class="card-header">
              <span>系统参数配置</span>
            </div>
          </template>
          <el-form :model="systemSettings" label-width="120px">
            <el-form-item label="数据备份">
              <el-button type="primary" @click="backupData">立即备份</el-button>
              <el-button type="success" @click="restoreData">恢复数据</el-button>
              <div class="setting-desc">定期备份重要数据，确保数据安全</div>
            </el-form-item>
            <el-form-item label="自动备份">
              <el-switch v-model="systemSettings.autoBackup" />
              <div class="setting-desc">每天自动备份数据</div>
            </el-form-item>
            <el-form-item label="日志保留天数">
              <el-input-number
                v-model="systemSettings.logRetentionDays"
                :min="7"
                :max="365"
                controls-position="right"
              />
              <span style="margin-left: 10px;">天</span>
            </el-form-item>
            <el-form-item label="系统维护模式">
              <el-switch v-model="systemSettings.maintenanceMode" />
              <div class="setting-desc">开启后用户无法进行预订操作</div>
            </el-form-item>
            <el-form-item label="调试模式">
              <el-switch v-model="systemSettings.debugMode" />
              <div class="setting-desc">开启后显示详细的错误信息</div>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { Check } from '@element-plus/icons-vue';

export default {
  name: 'Settings',
  components: {
    Check
  },
  setup() {
    const activeTab = ref('basic');
    const saving = ref(false);

    // 基本设置
    const basicSettings = reactive({
      name: '星辰台球厅',
      phone: '400-123-4567',
      address: '北京市朝阳区xxx街道xxx号',
      openTime: '09:00',
      closeTime: '23:00',
      description: '专业的台球娱乐场所，提供标准台、VIP台和比赛台，环境优雅，设备先进。'
    });

    // 价格设置
    const pricingSettings = reactive({
      standardPrice: 30,
      vipPrice: 50,
      competitionPrice: 80,
      memberDiscount: 0.8,
      minHours: 1
    });

    // 预订设置
    const bookingSettings = reactive({
      advanceDays: 7,
      cancelHours: 2,
      deposit: 50,
      allowMultiple: false,
      requireRealName: false
    });

    // 通知设置
    const notificationSettings = reactive({
      smsEnabled: true,
      emailEnabled: true,
      wechatEnabled: false,
      reminderMinutes: 30
    });

    // 系统设置
    const systemSettings = reactive({
      autoBackup: true,
      logRetentionDays: 30,
      maintenanceMode: false,
      debugMode: false
    });

    // 方法
    const loadSettings = () => {
      // 从本地存储加载设置
      const storedSettings = localStorage.getItem('systemSettings');
      if (storedSettings) {
        const settings = JSON.parse(storedSettings);
        Object.assign(basicSettings, settings.basic || {});
        Object.assign(pricingSettings, settings.pricing || {});
        Object.assign(bookingSettings, settings.booking || {});
        Object.assign(notificationSettings, settings.notification || {});
        Object.assign(systemSettings, settings.system || {});
      }
    };

    const saveAllSettings = () => {
      saving.value = true;

      const allSettings = {
        basic: basicSettings,
        pricing: pricingSettings,
        booking: bookingSettings,
        notification: notificationSettings,
        system: systemSettings
      };

      // 保存到本地存储
      localStorage.setItem('systemSettings', JSON.stringify(allSettings));

      setTimeout(() => {
        saving.value = false;
        ElMessage.success('设置保存成功');
      }, 1000);
    };

    const backupData = () => {
      ElMessage.success('数据备份功能开发中...');
    };

    const restoreData = () => {
      ElMessage.success('数据恢复功能开发中...');
    };

    onMounted(() => {
      loadSettings();
    });

    return {
      activeTab,
      saving,
      basicSettings,
      pricingSettings,
      bookingSettings,
      notificationSettings,
      systemSettings,
      saveAllSettings,
      backupData,
      restoreData
    };
  }
};
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header-left h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
  color: #2c3e50;
  font-weight: 600;
}

.header-left p {
  margin: 0;
  color: #7f8c8d;
  font-size: 16px;
}

.header-actions {
  display: flex;
  gap: 12px;
}

/* 设置选项卡 */
.settings-tabs {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.setting-card {
  border: none;
  border-radius: 8px;
  margin-bottom: 20px;
}

.card-header {
  font-weight: 600;
  color: #2c3e50;
}

.setting-desc {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .settings-container {
    padding: 10px;
  }

  .page-header {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .settings-tabs {
    padding: 15px;
  }
}
</style>
